<template>
	<div class="table-container">
		<!--默认查询-->
		<vab-query-form>
			<el-form ref="formSearch" v-model="search" @submit.native.prevent :inline="inline2" :label-width="null">
				<el-form-item v-if="user.isAdminStore || user.isMainStore">
					<remoteselect v-model="search.SysStoreID" url="api/System/SysStoreListSelect"
						value-label="SysStoreName" value-key="SysStoreID" query-key="selectIDName"
						:placeholder="replaceID(keyLan['SysStoreID'])" style="width:150px;">
						<template v-slot="{ row }">
							{{ row.SysStoreName }}
						</template>
					</remoteselect>
				</el-form-item>
				<el-form-item>
					<el-input v-model="search.SysCustomerName__PY" :placeholder="keyLan['SysCustomerName']"
						@keyup.native.enter="getList" style="width:120px" ref="SysCustomerName">
					</el-input>
				</el-form-item>

				<el-form-item>
					<el-input v-model="search.Phone" :placeholder="keyLan['Phone']" @keyup.native.enter="getList"
						style="width:120px">
					</el-input>
				</el-form-item>

				<el-form-item>
					<el-input v-model="search.SysCustomerIdCard$IdCard" :placeholder="keyLan['SysCustomerIdCard']"
						@keyup.native.enter="getList" style="width:120px">
					</el-input>
				</el-form-item>

				<el-form-item>
					<el-input v-model="search.Company" :placeholder="keyLan['Company']" @keyup.native.enter="getList"
						style="width:120px">
					</el-input>
				</el-form-item>

				<el-form-item>
					<el-select v-model="search.EnumSysCustomerIntention" clearable style="width:120px;"
						:placeholder="keyLan['EnumSysCustomerIntention']" @change="getList">
						<el-option v-for="item in EnumSysCustomerIntention" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-select v-model="search.Qualification" clearable style="width:120px;"
						:placeholder="keyLan['Qualification']" @change="getList">
						<el-option v-for="item in Qualification" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- <el-form-item>
					<el-select v-model="search.EnumGender" clearable style="width:120px;"
						:placeholder="keyLan['EnumGender']">
						<el-option v-for="item in EnumGender" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item> -->

				<!-- <el-form-item>
					<el-select v-model="search.EnumStatus" clearable style="width:120px;"
						:placeholder="keyLan['EnumStatus']">
						<el-option v-for="item in EnumStatus" :key="item.Value" :value="item.Value"
							:label="enumLanTxt(item.Label)">
						</el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item :label="comLan['remindTime'] + ':'">
					<!-- <el-input-number type="number" v-model.number="search.minRemindTime" :controls="false" pattern="\d*"
						@keyup.native.enter="getList" style="width:70px;" :max="search.maxRemindTime">
					</el-input-number>
					{{ comLan["to"] }} -->
					<el-input-number type="number" v-model.number="search.maxRemindTime" :controls="false" pattern="\d*"
						@keyup.native.enter="getList" style="width:70px;" :min="search.minRemindTime">
					</el-input-number>
					{{ comLan['day'] }}
				</el-form-item>

				<el-form-item>
					<remoteselect v-model="search.ReferrerID" url="api/Referrer/ListSelect" value-label="Name"
						value-key="ReferrerID" query-key="selectIDName" :placeholder="replaceID(keyLan['ReferrerID'])"
						style="width:150px;">
						<template v-slot="{ row }">
							{{ row.Name + "/" + row.Phone }}
						</template>
					</remoteselect>
				</el-form-item>

				<!-- <el-form-item>
					<remoteselect v-model="search.OrganizationID" url="api/Organization/ListSelect" value-label="Name"
						value-key="OrganizationID" query-key="selectIDName"
						:placeholder="replaceID(comLan['OrganizationID'])" style="width:150px;">
						<template v-slot="{ row }">
							{{ row.Name + "/" + row.Phone }}
						</template>
					</remoteselect>
				</el-form-item> -->

				<el-form-item :label="keyLan['CreateDate'] + ':'">
					<el-date-picker v-model="search.CreateDate" type="daterange" :placeholder="keyLan['CreateDate']"
						style="width:220px">
					</el-date-picker>
				</el-form-item>

				<el-form-item>
					<el-button icon="el-icon-search" type="primary" @click="getList" :loading="loading">
						{{ comLan["btnSearch"] }}
					</el-button>
					<el-button icon="el-icon-plus" type="primary" @click="btnAdd" v-if="button.新建">
						{{ comLan["btnAdd"] }}
					</el-button>
					<el-button icon="el-icon-download" type="primary" @click="btnExport" v-if="button.导出">
						{{ comLan["btnExport"] }}
					</el-button>

					<el-button icon="el-icon-upload" type="primary" @click="btnImport" v-if="button.导入">
						{{ comLan["btnImport"] }}
					</el-button>
				</el-form-item>
			</el-form>
		</vab-query-form>
		<!--默认列表-->
		<u-table :row-height="100" ref="table" v-loading="loading" :data="list" row-key="SysCustomerID"
			:use-virtual="useVirtual">
			<u-table-column v-if="user.isAdminStore || user.isMainStore" prop="SysStore.SysStoreName"
				:label="comLan['Key']['SysStore']['SysStoreName']" width="120" align="left"></u-table-column>

			<u-table-column prop="SysCustomerName" :label="keyLan['SysCustomerName']" width="80" align="left">
			</u-table-column>
			<u-table-column prop="Phone" :label="keyLan['Phone']" width="110" align="left">
			</u-table-column>

			<u-table-column prop="SysCustomerIdCard" :label="keyLan['SysCustomerIdCard']" width="170" align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.SysCustomerIdCard">{{ getSysCustomerIdCard(scope.row) }}</span>
				</template>
			</u-table-column>

			<u-table-column prop="Company" :label="keyLan['Company']" width="180" align="left">
			</u-table-column>

			<u-table-column prop="EnumSysCustomerIntention" :label="keyLan['EnumSysCustomerIntention']" width="80"
				align="center">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.EnumSysCustomerIntention, EnumSysCustomerIntention)"></span>
				</template>
			</u-table-column>

			<u-table-column prop="Qualification" :label="keyLan['Qualification']" width="50" align="center">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.Qualification, Qualification)"></span>
				</template>
			</u-table-column>

			<!-- <u-table-column prop="EnumStatus" :label="keyLan['EnumStatus']" width="50" align="center">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.EnumStatus, EnumStatus)"></span>
				</template>
			</u-table-column> -->

			<u-table-column prop="remindTime" :label="comLan['remindTime'] + '(蓝色:已复审,红色:快要到期,灰色:已过期)'" width="380"
				align="left">
				<template v-slot="scope">
					<div class="remindTime" v-if="!!scope.row.CertSearch02Json && !!scope.row.CertSearch03Json"
						v-html="getCertSearch(scope.row)">
					</div>
				</template>
			</u-table-column>

			<u-table-column prop="Referrer" :label="replaceID(keyLan['ReferrerID'])" width="95" align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.Referrer && !!scope.row.Referrer.ReferrerID">
						{{ scope.row.Referrer.Name + "/" + scope.row.Referrer.Phone }}
					</span>
				</template>
			</u-table-column>

			<!-- <u-table-column prop="SysCustomerOrganizationTrain" :label="replaceID(comLan['OrganizationID'])" width="180"
				align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.SysCustomerOrganizationTrain">
						{{ getSysCustomerOrganizationTrain(scope.row) }}
					</span>
				</template>
			</u-table-column> -->

			<u-table-column prop="CreateDate" :label="keyLan['CreateDate']" width="160" align="center">
				<template v-slot="scope">
					<span v-if="!!scope.row.CreateDate">{{ scope.row.CreateDate | datetime }}</span>
				</template>
			</u-table-column>
			<u-table-column prop="Remark" :label="keyLan['Remark']" align="left"></u-table-column>

			<u-table-column2 v-if="showOp">
				<template v-slot="scope">
					<el-button type="text" @click="btnEdit(scope)" v-if="button.编辑">
						{{ comLan["btnEdit"] }}
					</el-button>
					<!-- <el-button type="text" @click="btnEnumStatus(scope, scope.row.EnumStatus == 0 ? 1 : 0)"
						v-if="button.启用禁用">
						{{ scope.row.EnumStatus == 0 ? comLan["btnEnable"] : comLan["btnDisable"] }}
					</el-button> -->
					<el-button type="text" @click="btnDel(scope)" v-if="button.删除">
						{{ comLan["btnDel"] }}
					</el-button>

					<el-button type="text" @click="btnSync(scope)" v-if="button.拉取数据" v-loading="syncLoading">
						{{ comLan["btnSync"] }}
					</el-button>
				</template>
			</u-table-column2>
		</u-table>
		<el-pagination v-if="showPage" :current-page="search.index" :page-size="search.size" :total="total"
			@current-change="indexChange" @size-change="sizeChange"></el-pagination>

		<el-dialog :title="comLan['btnImport']" :visible.sync="importVisible">
			<span style="width:350px">
				<!-- <span v-if="!!file" style="display: inline;width:350px">{{ comLan["choiceFile"] }}:</span> -->
				<uploadfile style="display: inline;" ref="uploadfile" v-model="file" :max="1"></uploadfile>
			</span>
			<br />
			<el-button icon="el-icon-upload" type="primary" @click="importFile" v-if="button.导入"
				v-loading="importLoading">
				{{ comLan["btnImport"] }}
			</el-button>
			<el-button style="margin-left: 10px;" type="text" @click="window.open(locationUrl + '/Import/客户导入.xlsx')">
				{{ comLan["downloadFile"] }}
			</el-button>
			<br />
			<div v-if="!!downloadFileError">
				导入失败的excel下载: <el-button @click="btnDownload" v-if="!!downloadFileError" v-loading="importLoading">下载
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import common from "@/common/common.js";
import js from "./js.js";

export default {
	name: "SysCustomerListNew",
	mixins: [common.baseVM, js],
	components: {},
	computed: {},
	data() {
		return {
			window: window,
			button: {
				查询: false,
				新建: false,
				编辑: false,
				启用禁用: false,
				// 上架下架: false,
				删除: false,
				导出: false,
				导入: false,
				拉取数据: false
			},
			search: {
				SysStoreID: null,
				Name: null,
				Phone: null,
				Address: null,
				EnumStatus: 1,
				CreateDate: [],

				Name__PY: null,

				minRemindTime: null,
				maxRemindTime: null,
				ReferrerID: null,
				EnumSysCustomerIntention: null,
				Qualification: null,
				OrganizationID: null
			},
			isRedict: true,

			importVisible: false,
			file: '',
			importLoading: false,
			downloadFileError: '',

			syncLoading: false
		};
	},
	methods: {
		importFile() {
			if (!this.file) {
				this.showToast(this.comLan["choiceFileRequire"], "error");
				return;
			}
			var postData = this.toKeyValue({
				file: this.file
			});
			this.importLoading = true;
			this.post("/api/SysCustomer/Import", postData).then(data => {
				this.importLoading = false;
				if (data.Result != null) {
					this.downloadFileError = data.Result;
					this.showToast(data.Message, data.Success ? "success" : "error");
					window.open(this.downloadFileError);
				} else {
					this.showToast(data.Message, data.Success ? "success" : "error");
				}
				this.importVisible = false;
			}).catch(e => {
				this.importLoading = false;
			});
		},
		selectionChange(val) {
			//console.log("selectionChange", val);
		},
		init() {
			this.$nextTick(() => {
				this.$refs.SysCustomerName.focus();
			});
			var query = this.getQuery();
			var temp = query['Name__PY'];
			if (!!temp) {
				this.search.Name__PY = temp;
			}
			this.loadDefaultSearch(() => {
				this.getList();
			});
		},
		btnAdd() {
			if (this.isRedict) {
				// 跳转链接
				var url = "/SysCustomer/SysCustomerAddRedictNew";
				this.navigateToRefresh(url);
			} else {
				this.$refs["exAddEdit"].show();
			}
		},
		btnEdit(scope) {
			if (this.isRedict) {
				// 跳转链接
				var url = "/SysCustomer/SysCustomerAddRedictNew";
				this.navigateToRefresh(url, {
					id: scope.row.SysCustomerID
				});
			} else {
				this.$refs["exAddEdit"].show(scope);
			}
		},
		btnEnumStatus(scope, status) {
			var id = scope.row.SysCustomerID;
			var name = scope.row.Name;
			var str = status == 1 ? this.comLan["btnEnable"] : this.comLan["btnDisable"];
			var msg = this.stringFormat(this.comLan.js["updateEnumStatus"], name, str);
			this.confirm(msg, () => {
				this.post("api/SysCustomer/UpdateEnumStatus", this.toKeyValue({
					id: id,
					status: status
				})).then(data => {
					this.showToast(data.Message, "success");
					this.getList();
				}).catch(error => { });
			});
		},
		btnDel(scope) {
			var id = scope.row.SysCustomerID;
			var name = scope.row.Name;
			var msg = this.stringFormat(this.comLan.js["delete"], name);
			this.confirm(msg, () => {
				this.post("api/SysCustomer/Del", this.toKeyValue({
					id: id
				})).then(data => {
					this.showToast(data.Message, "success");
					this.getList();
				}).catch(error => { });
			});
		},
		getList() {
			this.getListByUrl('api/SysCustomer/List');
		},
		btnExport() {
			// this.$refs.exTable.exportFile(this.keyLan["name"]);
			this.exportFile(this.keyLan["name"]);
		},

		btnImport() {
			this.importVisible = true;
		},

		getSysCustomerName(row) {
			return row.Name;
		},

		getSysCustomerIdCard(row) {
			if (row.SysCustomerIdCard == null || row.SysCustomerIdCard.length == 0) return '';
			var first = row.SysCustomerIdCard[0];
			return first.IdCard;
		},

		getCertSearch(row) {
			var json2 = null;
			var json3 = null;
			try {
				json2 = JSON.parse(row.CertSearch02Json);
			} catch (e) { }
			try {
				json3 = JSON.parse(row.CertSearch03Json);
			} catch (e) { }
			var r = '';
			if (json3 != null) {
				for (var i = 0; i < json3.length; i++) {
					var item = json3[i];
					if (!!item.oldId) {
						var name = item.operItemName;
						var length = json3.filter(m => m.operItemName == name).length;
						if (length > 1) continue;
					}
					if (!!r) r += "<br />";
					r += `复审:${this.getRedTime(item.shouldReviewDate, item)},到期:${this.getRedTime(item.validEndDate)};${item.jobTypeName}-${item.operItemName}`;
				}
			}
			if (json2 != null) {
				for (var i = 0; i < json2.length; i++) {
					var item = json2[i];
					if (!!item.oldId) {
						var name = item.operItemName;
						var length = json3.filter(m => m.operItemName == name).length;
						if (length > 1) continue;
					}
					if (!!r) r += "<br />";
					r += `复审:${this.getRedTime(item.shouldReviewDate, item)},到期:${this.getRedTime(item.validEndDate)};${item.jobTypeName}-${item.operItemName}`;
				}
			}
			return r;
		},

		getRedTime(dtString, item) {
			if (dtString == null || dtString == '') return dtString;
			if (item != null && !!item.reviewDate) {
				return `<span style="color:blue;font-weight:bloder;font-size:12px" title="已复审">${dtString}</span>`;
			}
			var dt = this.toDate(dtString);
			var dtNow = new Date();//获取当前时间
			var diff = dt.getTime() - dtNow.getTime();//时间差的毫秒数
			var dayDiff = Math.floor(diff / (24 * 3600 * 1000));//计算出相差天数
			var day = this.search.maxRemindTime;
			if (!day) day = 31;
			if (dayDiff < day) {
				var isOver = dayDiff < 0;
				return `<span style="color:${(isOver ? "darkgray" : "red")};font-weight:bloder;font-size:12px" title="${(isOver ? "已过期" : "快要到期")}">${dtString}</span>`;
			}
			return `<span style="font-weight:bloder;font-size:12px">${dtString}</span>`;
		},

		getSysCustomerOrganizationTrain(row) {
			return '';
		},

		btnSync(scope) {
			var row = scope.row;
			var idCard = this.getSysCustomerIdCard(row);
			if (!idCard) {
				this.showToast("证件号为空", "error");
				return;
			}
			var postData = this.toKeyValue({
				id: row.SysCustomerID
			});
			this.syncLoading = true;
			this.post("/api/SysCustomer/Sync", postData).then(data => {
				this.showToast(data.Message, data.Success ? "success" : "error");
				this.syncLoading = false;
				if (data.Success) {
					this.getList();
				}
			}).catch(e => {
				this.syncLoading = false;
			});
		}
	}
};
</script>
